import React,{Component} from 'react';
// import store from './store/indexb.js' 
import {connect} from 'react-redux';
class TodoListB extends Component { //瑞哎的React 瑞达克斯 Redux
 	// constructor(props){ // 啃食踹咳得 默认的 优于其他先执行
	// 	super(props)
	// 	this.state=store.getState();
		// this.handleInputChange=this.handleInputChange.bind(this);
		// this.handleBtnClick=this.handleBtnClick.bind(this);
		// this.handleItemClick=this.handleItemClick.bind(this);
		// this.handleStoreChange=this.handleStoreChange.bind(this);
		// store.subscribe(this.handleStoreChange)
	// }
	render(){//软的
		const {inputValue,handleInputChang,handleBtnClick,list}=this.props;
		return (
			<div>
				<div>	
					<input value={inputValue}
						onChange={handleInputChang}
					/>
					{/* onClick={this.props.handleBtnClick.bind(this)} */}
					<button onClick={handleBtnClick}
					>提交</button>
				</div>
				<ul>
					{/* <li >
						dello
					</li>	// onClick={
							// 	()=>{this.props.handleItemClick(index)}
							// } */}
					{list.map((item,index)=>{
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
	}

	// handleInputChange(e){//发起修改
	// 	const action=gethandleInputChangAction(e.target.value)
	// 	store.dispatch(action)
	// }
	// handleStoreChange(){//修改数据
	// 	this.setState(store.getState())
	// }
	// handleBtnClick(){//button点击事件
	// 	const action=gethandleBtnClick()
	// 	store.dispatch(action)
	// }

}

const mapStateToProps = (state)=>{
	return{
		inputValue:state.inputValue,
		list:state.list
	}
}

//store.dispatch props
const mapDispatchToProps = (dispatch)=>{
	return{
		handleInputChang(e){
			const action={
				type:'change_input_value',
				value:e.target.value
			}
			dispatch(action)
		},
		handleBtnClick(){
			const action={
				type:'add_todo_item'
			}
			dispatch(action)
		}
		// ,
		// handleItemClick(index){//删除事件
		// 	const action=gethandleItemClick(index)
		// 	store.dispatch(action)
		// }
	}
}


export default connect(mapStateToProps,mapDispatchToProps)(TodoListB);